<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>滚动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->
    <script src="../../static/vue.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        #app{
            width: 500px;
            margin: auto
        }
        #app_content{
            /* width:500px;
            height: 300px; */
            margin: auto;
            overflow:hidden;
        }
        #scrollwatcher{
            height: 330px;
            overflow: auto;
        }
        #content{
            background-color: pink;
            /* float: left; */
        }
        #scrollwatcher_content{
            height: 340px;
            padding:10px 0 0 10px;
            /* margin: 100px; */
        }
        textarea{
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <textarea v-model="content"></textarea>   
        <div id="app_content">
                <!-- 滚动监视 -->
                <div id="scrollwatcher">
                    <!-- 撑出滚动条 -->
                    <div id="scrollwatcher_content">
                        <div id="content">
                            <span v-show="show">{{content}}</span>
                           <button @click="onClick">点我点我</button>
                        </div>
                        <div id="contenter"></div>
                    </div>
                </div>
            </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    show:false,
                    content:` 码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情
                            码云企业版 11. 11 特惠，多年购买低至 7 折，还可获得价值 2400 元 KubeCon + CloudNativeCon 门票！点此了解详情`
                }
            },
            methods: {
                onClick(){
                    this.show=!this.show;
                }
            },
            mounted() {
                var scrollwatcher=this.$el.querySelector('#scrollwatcher');
                scrollwatcher.scrollTop=scrollwatcher.scrollHeight;
                scrollwatcher.scrollLeft=scrollwatcher.scrollWidth;
                console.log( scrollwatcher.scrollTop)
                console.log(  scrollwatcher.scrollLeft)
                // var content=this.
                scrollwatcher.addEventListener('scroll',(ev)=>{
                    console.log( scrollwatcher.scrollTop)
                console.log(  scrollwatcher.scrollLeft)

                })
            },
        })
    </script>
</body>
</html>